<template>
  <div class="production-schedule-module">
    <div class="header">
      <span>当前位置：生产计划管理模块--生产调度</span>
      <button @click="togglePeriodicScheduling">周期性调度</button>
      <button @click="toggleRiskScheduling">风险调度</button>
    </div>
    <!-- 周期性调度模块 -->
    <div v-if="showPeriodicScheduling">
      <button @click="selectTab('confirmPersonnel')">确认人员</button>
      <button @click="selectTab('confirmProgress')">确认进度与原计划</button>
      <button @click="selectTab('setCycle')">设置滚动周期</button>

      <!-- 周期性调度子模块 -->
      <div v-if="selectedTab === 'confirmPersonnel'">
        <!-- 确认人员内容 -->
        <select v-model="selectedOption">
          <option value="employeeId">工号</option>
          <option value="name">姓名</option>
          <option value="workSection">工段</option>
          <option value="team">班组</option>
          <option value="productionLine">产线</option>
          <option value="placeholder">站位</option>
        </select>
        <input type="text" v-model="inputValue" placeholder="请输入信息" />
        <button @click="query">查询</button>
        <button @click="viewAll">查看所有</button>
        
        <table class="custom-table">
          <thead>
            <tr>
              <th>选择</th>
              <th>工号</th>
              <th>姓名</th>
              <th>在岗</th>
              <th>休假</th>
              <th>出差</th>
              <th>状态</th>
              <th>技能等级</th>
              <th>所在岗位</th>
              <th>所在工位</th>
              <th>所在站位</th>
              <th>所在产线</th>
              <th>工作计划</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in paginatedRows" :key="index">
              <td>
                <input type="checkbox" v-model="row.selected" />
              </td>
              <td>
                <input type="text" v-model="row.employeeId" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.name" placeholder="" />
              </td>
              <td>
                <input type="radio" :name="'status' + index" v-model="row.status" value="在岗" />
              </td>
              <td>
                <input type="radio" :name="'status' + index" v-model="row.status" value="休假" />
              </td>
              <td>
                <input type="radio" :name="'status' + index" v-model="row.status" value="出差" />
              </td>
              <td>{{ row.status }}</td>
              <td>
                <input type="text" v-model="row.skillLevel" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.position" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.workStation" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.station" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.productionLine" placeholder="" />
              </td>
              <td>
                <button>查看</button>
              </td>
            </tr>
          </tbody>
        </table>

        <div class="table-controls">
          <button @click="updateTable">更新</button>
          <button @click="confirmTable">确定</button>
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
        </div>
      </div>

      <div v-else-if="selectedTab === 'confirmProgress'">
        <!-- 确认进度与原计划内容 -->
        <h1>装配进度</h1>
          <table class="custom-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>站位名称</th>
              <th>站位编号</th>
              <th>当前AO</th>
              <th>当前作业批次</th>
              <th>站位可容纳最大人数</th>
              <th>交付节点</th>
              <th>风险等级</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in paginatedRows" :key="index">
              <td>
                <input type="text" v-model="row.number" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.station" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.stationNumber" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.ao" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.batch" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.capacity" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.deliveryNodes" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.riskLevel" placeholder="" />
              </td>
            </tr>
          </tbody>
        </table>

        <div class="table-controls">
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
        </div>
     
        <h1>原计划</h1>
          <table class="custom-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>组部件编号</th>
              <th>工位</th>
              <th>批次</th>
              <th>开始装配时间</th>
              <th>指令交付节点</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in paginatedRows" :key="index">
              <td>
                <input type="text" v-model="row.number1" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.number2" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.station1" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.batch1" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.startTime" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.deliveryNodes1" placeholder="" />
              </td>
            </tr>
          </tbody>
        </table>

        <div class="table-controls">
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
        </div>
      </div>

      <div v-else-if="selectedTab === 'setCycle'">
        <!-- 设置滚动周期内容 -->
        <div class="input-group">
          <label for="rollingInterval">滚动间隔周期：</label>
          <input type="text" id="rollingInterval" v-model="rollingInterval" />
        </div>
        <div class="input-group">
          <label for="rollingCycle">滚动周期：</label>
          <input type="text" id="rollingCycle" v-model="rollingCycle" />
        </div>
      </div>
    </div>

    <!-- 风险调度模块 -->
    <div v-else-if="showRiskScheduling">
      <button @click="selectTab('Personnel')">确认人员</button>
      <button @click="selectTab('confirmStation')">确认站位信息</button>
      <button @click="selectTab('confirmAo')">确认指令信息</button>
      <button @click="selectTab('Progress')">确认进度</button>
      <button @click="selectTab('originalPlan')">原计划</button>
      <button @click="selectTab('Risk')">风险事件</button>
      <button @click="selectTab('schedulingScope')">选择调度范围</button>

      <!-- 风险调度子模块 -->
      <div v-if="selectedTab === 'Personnel'">
        <select v-model="selectedOption">
          <option value="employeeId">工号</option>
          <option value="name">姓名</option>
          <option value="workSection">工段</option>
          <option value="team">班组</option>
          <option value="productionLine">产线</option>
          <option value="placeholder">站位</option>
        </select>
        <input type="text" v-model="inputValue" placeholder="请输入信息" />
        <button @click="query">查询</button>
        <button @click="viewAll">查看所有</button>

        <table class="custom-table">
          <thead>
            <tr>
              <th>选择</th>
              <th>工号</th>
              <th>姓名</th>
              <th>在岗</th>
              <th>休假</th>
              <th>出差</th>
              <th>状态</th>
              <th>技能等级</th>
              <th>所在岗位</th>
              <th>所在工位</th>
              <th>所在站位</th>
              <th>所在产线</th>
              <th>工作计划</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in paginatedRows" :key="index">
              <td>
                <input type="checkbox" v-model="row.selected" />
              </td>
              <td>
                <input type="text" v-model="row.employeeId" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.name" placeholder="" />
              </td>
              <td>
                <input type="radio" :name="'status' + index" v-model="row.status" value="在岗" />
              </td>
              <td>
                <input type="radio" :name="'status' + index" v-model="row.status" value="休假" />
              </td>
              <td>
                <input type="radio" :name="'status' + index" v-model="row.status" value="出差" />
              </td>
              <td>{{ row.status }}</td>
              <td>
                <input type="text" v-model="row.skillLevel" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.position" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.workStation" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.station" placeholder="" />
              </td>
              <td>
                <input type="text" v-model="row.productionLine" placeholder="" />
              </td>
              <td>
                <button>查看</button>
              </td>
            </tr>
          </tbody>
        </table>

        <div class="table-controls">
          <button @click="updateTable">更新</button>
          <button @click="confirmTable">确定</button>
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
        </div>
      </div>
      
      <div v-else-if="selectedTab === 'confirmStation'">
        <table class="custom-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>站位名称</th>
              <th>站位编号</th>
              <th>装配周期</th>
              <th>站位容纳最大人数</th>
              <th>站位理想人数</th>
              <th>前置站位</th>
              <th>后置站位</th>
              <th>装配指令</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in paginatedRows" :key="index">
              <td>
                <input type="text" v-model="row.number" placeholder="" />
              </td>
            </tr>
          </tbody>
        </table>
        <div class="table-controls">
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
        </div>
      </div>
      
      <div v-else-if="selectedTab === 'confirmAo'">
        <table class="custom-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>AO名称</th>
              <th>AO编号</th>
              <th>AO代号</th>
              <th>是否关重</th>
              <th>是否人工</th>
              <th>替代指令</th>
              <th>AO类别</th>
              <th>齐套率</th>
              <th>详细指令</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in paginatedRows" :key="index">
              <td>
                <input type="text" v-model="row.number" placeholder="" />
              </td>
            </tr>
          </tbody>
        </table>
        <div class="table-controls">
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
        </div>
      </div>
      
      <div v-else-if="selectedTab === 'Progress'">
        <table class="custom-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>站位名称</th>
              <th>站位编号</th>
              <th>当前AO</th>
              <th>当前作业批次</th>
              <th>站位可容纳最大人数</th>
              <th>交付节点</th>
              <th>风险等级</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in paginatedRows" :key="index">
              <td>
                <input type="text" v-model="row.number" placeholder="" />
              </td>
            </tr>
          </tbody>
        </table>
        <div class="table-controls">
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
        </div>
      </div>
      
      <div v-else-if="selectedTab === 'originalPlan'">
        <table class="custom-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>指令名称</th>
              <th>指令编号</th>
              <th>所在站位</th>
              <th>装配人员</th>
              <th>开始装配时间</th>
              <th>指令交付时间</th>
              <th>是否完成</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in paginatedRows" :key="index">
              <td>
                <input type="text" v-model="row.number" placeholder="" />
              </td>
            </tr>
          </tbody>
        </table>
        <div class="table-controls">
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
        </div>
      </div>
      
      <div v-else-if="selectedTab === 'Risk'">
        <table class="custom-table">
          <thead>
            <tr>
              <th>选择</th>
              <th>序号</th>
              <th>接收时间</th>
              <th>处理时间</th>
              <th>异常类型</th>
              <th>异常站位</th>
              <th>异常描述</th>
              <th>异常持续时间</th>
              <th>异常处理状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in paginatedRows" :key="index">
              <td>
                <input type="checkbox" v-model="row.selected" />
              </td>
              <td>
                <input type="text" v-model="row.number" placeholder="" />
              </td>
            </tr>
          </tbody>
        </table>
        <div class="table-controls">
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
        </div>
      </div>
      
      <div v-else-if="selectedTab === 'schedulingScope'">
        <h1>主计划表</h1>
          <table class="custom-table">
          <thead>
            <tr>
              <th>选择</th>
              <th>序号</th>
              <th>直升机编号</th>
              <th>机型</th>
              <th>批次</th>
              <th>开始装配时间</th>
              <th>指令交付节点</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in paginatedRows" :key="index">
              <td>
                <input type="checkbox" v-model="row.selected" />
              </td>
              <td>
                <input type="text" v-model="row.number" placeholder="" />
              </td>
            </tr>
          </tbody>
        </table>

        <div class="table-controls">
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
        </div>
     
        <h1>季/月度计划表</h1>
          <table class="custom-table">
          <thead>
            <tr>
              <th>选择</th>
              <th>序号</th>
              <th>组部件编号</th>
              <th>工位</th>
              <th>批次</th>
              <th>开始装配时间</th>
              <th>指令交付节点</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in paginatedRows" :key="index">
              <td>
                <input type="text" v-model="row.number1" placeholder="" />
              </td>
            </tr>
          </tbody>
        </table>

        <div class="table-controls">
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPeriodicScheduling: false,
      showRiskScheduling: false,
      selectedTab: 'confirmPersonnel', // 默认选择周期性调度的第一个子选项卡
      rollingInterval: '',
      rollingCycle: '',
      personnelData: Array.from({ length: 50 }, () => ({
        selected: false,
        employeeId: '',
        name: '',
        status: '',
        skillLevel: '',
        position: '',
        workStation: '',
        station: '',
        productionLine: ''
      })),
      currentPage: 1,
      rowsPerPage: 10,
      filteredData: [] // 用于过滤后的数据
    };
  },
  computed: {
    paginatedRows() {
      const start = (this.currentPage - 1) * this.rowsPerPage;
      const end = start + this.rowsPerPage;
      return this.filteredData.slice(start, end);
    }
  },
  methods: {
    togglePeriodicScheduling() {
      this.showPeriodicScheduling = !this.showPeriodicScheduling;
      if (this.showPeriodicScheduling) {
        this.showRiskScheduling = false;
        this.selectedTab = 'confirmPersonnel'; // 切换到周期性调度，默认显示确认人员
      } else {
        this.selectedTab = ''; // 关闭周期性调度时重置选项卡状态
      }
    },
    toggleRiskScheduling() {
      this.showRiskScheduling = !this.showRiskScheduling;
      if (this.showRiskScheduling) {
        this.showPeriodicScheduling = false;
        this.selectedTab = 'Personnel'; // 切换到风险调度，默认显示确认人员
      } else {
        this.selectedTab = ''; // 关闭风险调度时重置选项卡状态
      }
    },
    selectTab(tab) {
      this.selectedTab = tab;
    },
    query() {
      // 查询逻辑
    },
    viewAll() {
      // 查看所有逻辑
    },
    updateTable() {
      // 更新表格逻辑
    },
    confirmTable() {
      // 确认表格逻辑
    },
    firstPage() {
      this.currentPage = 1;
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < Math.ceil(this.filteredData.length / this.rowsPerPage)) {
        this.currentPage++;
      }
    },
    lastPage() {
      this.currentPage = Math.ceil(this.filteredData.length / this.rowsPerPage);
    }
  },
  created() {
    // 初始化加载数据
    this.filteredData = this.personnelData;
  }
};
</script>

<style scoped>
.production-schedule-module {
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
}

.header span {
  margin-right: 20px;
}

.header button {
  margin-left: 10px;
}

.periodic-scheduling {
  margin-top: 20px;
}

.confirm-personnel {
  margin-top: 10px;
}

.confirm-personnel select,
.confirm-personnel input {
  margin-right: 10px;
}


.table-controls {
  margin-top: 10px;
}

.table-controls button {
  margin-right: 10px;
}

.set-cycle {
margin-top: 20px;
}

</style>